<template>
	<view class="">
		<view v-for="(item,index) in state" :key="item.id" :class="index%2===0?'bg-f1f1f1':''"
			class="table-body leading-140px flex flex-x-between flex-y-center">
			<text class="w-1-3 text-center">{{item?.type}}</text>
			<text class="w-1-3 text-center">{{item?.count}}</text>

			<l-circle class="flex" v-model:current="item.modelVale" :percent="item.ratio" size='120rpx' :max="100">
				<text class="text-22px">{{item.modelVale}}%</text>
			</l-circle>
		</view>
	</view>
</template>

<script setup name="Content">
	import {
		computed
	} from 'vue';

	const emit = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({}),
		},
	})

	const state = computed({
		get() {
			return props.modelValue
		},
		set(value) {
			emit('update:modelValue', value)
		},
	})
</script>